<template>
    <div class="paging-box flexCenter">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'pagination',
    props: {
        total: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.$emit('changePage', val);
        }
    }
}
</script>

<style lang="scss" scoped>
    .paging-box {
        padding: 20px;
        box-sizing: border-box;
        justify-content: flex-end;
    }
</style>